<template>
	<div>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  append-to-body
	  width="550px"
	  class="custom-dialog"
	  @close="resetForm"
	>
	
	<el-form
	  ref="userFormRef"
	  :model="formData"
	  :rules="userFormRules"
	  label-width="100px"
	>
	
		<el-form-item label="图标" prop="name">
		    <el-upload
		        class="avatar-uploader"
				ref="upload"
				:auto-upload="false"
				:show-file-list="false"
				:on-change="handleForUploadThumbnail"
		    >
		      <img v-if="imageUrl" :src="imageUrl" class="avatar">
		      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
		    </el-upload>
		</el-form-item>
		<el-form-item label="名称" prop="name">
		  <el-input v-model="formData.name" placeholder="请输入名称" />
		</el-form-item>
		
	</el-form>
	
	<template #footer>
	  <div class="dialog-footer">
	    <el-button type="primary" @click="submitForm"  :loading="loading">确 定</el-button>
	    <el-button @click="closeDialog" :loading="loading">取 消</el-button>
	  </div>
	</template>
	
	</el-dialog>
</div>
</template>

<script lang="ts" setup>
/* 	import {
	  EditPen,Delete
	} from '@element-plus/icons-vue' */
	
	
	import { saveForAsset} from "@/api/asset";
	
	import { reactive, ref,defineEmits } from 'vue'
	import type {FormRules } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'


	const imageUrl = ref('');
	
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const userFormRef=ref();
	
	const userFormRules=reactive<FormRules>({
	  name: [{ required: true, message: "参数必填", trigger: "blur" }],
	});
	
	const formData=reactive<Object>({
		id:'',
		classifyId:'',
		name:'',
		thumbnail:'',
		thumbnailFile:null,
	})

	const handleForUploadThumbnail=(file, fileList)=> {
		formData.thumbnailFile=file.raw;
		imageUrl.value = URL.createObjectURL(file.raw);
	}
	  
	const openDialog=(classifyId:string,row:object,type:string)=>{
		//loadSelectTree();
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
			formData.classifyId=classifyId;
			Object.assign(formData, {pid:row?row.id:'-1'});
		}else{
			dialog.value.visible=true;
			dialog.value.title='编辑';
			if(row.id){
			  imageUrl.value=import.meta.env.VITE_APP_BASE_API+'/api/v1/thumbnail/'+row.id
			}
			Object.assign(formData, {
				id:row.id,
				classifyId:row.classifyId,
				name:row.name,
			});
			
		}
	}
	const submitForm=()=>{
		userFormRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				loading.value=true;
				saveForAsset(formData)
				.then((res) => {
					ElMessage.success(res.message);
					closeDialog();
				})
				.catch((e) => {
				})
				.finally(() => {
					loading.value=false;
				});
		  }
		});
	}
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog',formData)
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
	  userFormRef.value.resetFields();
	  userFormRef.value.clearValidate();
	  formData.id = "";
	  formData.classifyId = "";
	  formData.name= "";
	  formData.thumbnail = "";
	  formData.thumbnailFile=null;
	  imageUrl.value='';
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
</script>

<style scoped>
	
	/deep/.avatar-uploader .el-upload {
	  border: 1px dashed #ccc;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width: 7.5rem;
	  height: 7.5rem;
	  
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  text-align: center;
	}
	
	.form-row{
		width: 100%;
		display: flex;
		flex-direction: row;
		padding-right: 0.625rem;;
	}
	
</style>